{extend name="public:base" /}
{block name="js"}
<script type="text/javascript" src="__STATIC__/js/plugins/chosen/chosen.jquery.js"></script>

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post" action="{:url('config',[],'json')}" class="ajax-form">
                        <input type="hidden" name="id" value="{$row?$row.id:''}">

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">图片</label>
                                <div class="col-sm-8">
                                    <div style="position: relative;cursor: pointer;" class="sealImg">
                                        <input type="file" id="BannarImgId" style="display: none;" name="BannarImgId">
                                        <div class="img-upload upload-file" style="width: 100px;height: 100px;">
                                            <input type="hidden" class="required-validate" name="img"
                                                   value="{$row?$row.img:''}">
                                            <div class="img-upload-wrap">
                                                <div class="img-upload-icon">
                                                    <div class="fa fa-image"></div>
                                                    <div class="fa fa-plus">上传图片</div>
                                                </div>
                                                <div class="img-upload-preview">
                                                    {if condition="$row"}
                                                    <img src="{$row?$row.imgFile.path:''}">
                                                    {/if}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">描述</label>
                                <div class="col-sm-3">
                                    <textarea name="content" class="form-control"
                                              placeholder="">{$row?$row.content:''}</textarea>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="submit" class="btn btn-w-m btn-primary ">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='css'}
<style type="text/css">
    .img-upload-wrap {
        position: relative;
        width: 100px;
        height: 100px;
    }

    .img-upload-preview {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .img-upload-preview > img {
        width: 100px;
        height: 100px;
    }

    .img-upload-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #000;
        background: #9191918a;
        cursor: pointer;
    }

</style>
{/block}
{block name='js'}
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("input[name='recommend']").on("change", function (e) {
            if (($(this).val() - 2) === 0) {
                $(".re_img_recommand").show();
            } else {
                $(".re_img_recommand").hide();
            }
        });
        $('.upload-file').on("click", function () {
            $(this).parent().find("input[type='file']").trigger("click");
        });
        $('input[type="file"]').change(function (e) {
            const _this = $(this).parent().find(".upload-file")
            var pic = $(this)[0].files[0];
            var formData = new FormData();
            var url = "{:url('UploadFile/uploadPicture',array('session_id'=>session_id()))}";
            formData.append('download', pic);
            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status === 1) {
                        //上传成功
                        var id = data.data[0].id;
                        var path = data.data[0].path;
                        _this.find('input[type="hidden"]').val(id);
                        _this.find(".img-upload-preview").find('img').remove();
                        _this.find(".img-upload-preview").html('<img src="' + path + '" style="width: 100px;height: 100px;">');
                    } else {
                        layer.msg(data.info);
                    }
                }
            });
        });
    });
</script>
{/block}
